<template>
    <div class="comment-input-bar">
        <div class="comment-input">
            <img class="user-comment-avatar" :src="currentUser.icon" alt="">
            <div class="user-comment-input" @click="toComment">
                <p class="placeholder">有什么感悟要分享吗</p>
                <img
                    class="select-img-input"
                    src="~@/assets/images/select-image-icon.png"
                    alt=""
                />
            </div>

            <div
                :class="['user-comment-toggle', {'is--hidden-toggle': isHiddenToggle}]"
                @click="toggle()"
            >
                <div class="toggle-btn">
                    <i class="icon"></i>
                    <span class="text">{{ commentCount > 99 ? '99+' : commentCount }}</span>
                </div>
            </div>
        </div>
        <div class="comment-popup-wrapper" v-show="state.wrapperShow">
            <van-popup
                v-model:show="state.visible"
                class="comment-popup"
                overlay-class="comment-popup-overlay"
                position="bottom"
                closeable
                @closed="onClosed"
            >
                <CommentList ref="commentListRef" />
            </van-popup>
        </div>

        <CommentInput
            v-model:visible="commentInputState.visible"
            :maxlength="commentInputState.maxlength"
            :show-image="commentInputState.showImage"
            :accept="commentInputState.accept"
            @submit="onCommentInputSubmit"
        />
    </div>
</template>

<script setup>
import CommentList from '@/components/comment/comment-list';
import CommentInput from '@/components/comment-input/comment-input'
import {computed, onMounted, reactive, ref, watch} from 'vue';
import {useRoute} from 'vue-router';
import {useStore} from 'vuex';
// import {useGlobalZIndex} from '@/lib/hooks/use-global-z-index';

const props = defineProps({
    hiddenCommentToggle: {
        type: Boolean,
        default: false
    }
})
const emit = defineEmits(['on-commented']);

const route = useRoute();
const store = useStore();
const currentUser = computed(() => {
    return store.state?.currentUser || {};
});

const isHiddenToggle = computed(() => {
    return props.hiddenCommentToggle || state.visible
});

const commentListRef = ref();

/* 发布评论 */
const commentInputState = reactive({
    visible: false,
    maxlength: 500,
    showImage: true,
    accept: 'image/png,image/jpeg,image/gif',
})
function onCommentInputSubmit(data) {
    G_transmit('addComment', {
        data: {
            bizId: route.params.moocId,
            itemId: route.query.catalogueId,
            commentLevel: 1,
            imageJson: JSON.stringify(data.fileList),
            comments: data.message,
        }
    }).then(() => {
        if (commentListRef.value) {
            commentListRef.value.refreshComments();
        }
        commentCount.value++;
        emit('on-commented');

        commentInputState.visible = false;
        G_dispatchEvent('toast', { message: '提交成功', type: 'success'});
    })
}
/* 评论 */
function toComment() {
    commentInputState.visible = true;
}

// const wrapStyle = computed(() => {
//     return {
//         zIndex: zIndex.value
//     }
// })
// const zIndex = ref(useGlobalZIndex())
const state = reactive({
    wrapperShow: false,
    visible: false
})
function toggle(visible = !state.visible) {
    state.visible = visible;

    if (visible) {
        // zIndex.value = useGlobalZIndex();
        state.wrapperShow = true;
    }
}

function onClosed() {
    state.wrapperShow = false;
}

const commentCount = ref(0);
function getCommentCount() {
    G_transmit('getCommentCount', {
        queries: {
            moocId: route.params.moocId,
            itemId: route.query.catalogueId,
        }
    }).then(({data}) => {
        commentCount.value = data.allCount
    })
}
onMounted(() => {
    getCommentCount();
})
</script>

<style lang="scss" scoped>
.comment-input-bar {
    .comment-input {
        position: fixed;
        bottom: 0;
        width: 100%;
        padding: 0 15px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #FFF;
        box-shadow: 0px -4px 6px 0px rgba(140, 149, 179, 0.08);
        z-index: 22;

        .user-comment-avatar {
            flex: none;
            height: 34px;
            width: 34px;
            background: rgba(255, 0, 0, 0.1);
            margin-right: 8px;
            border-radius: 50%;
        }
        .user-comment-input {
            flex: 1;
            display: flex;
            align-items: center;
            background: #F5F5F5;
            border-radius: 18px;
            padding: 0 15px;
            height: 36px;

            .placeholder {
                flex: 1;
                font-size: 14px;
                color: #A2A3A4;
            }
            .select-img-input {
                height: 20px;
                width: 20px;
            }
        }
        .user-comment-toggle {
            margin-left: 20px;

            &.is--hidden-toggle {
                display: none;
            }

            .toggle-btn {
                display: flex;
                align-items: center;
            }

            .icon {
                display: block;
                height: 16px;
                width: 16px;
                margin: 2px;
                background: url(~@/assets/images/comment/comment-icon.png) no-repeat center;
                background-size: contain;
            }
            .text {
                margin-left: 5px;
                font-size: 12px;
            }
        }
    }

    .comment-popup-wrapper {
        position: fixed;
        bottom: 48px;
        right: 0;
        left: 0;
        top: 0;
        overflow: hidden;

        :deep(.comment-popup-overlay),
        :deep(.comment-popup) {
            position: absolute;
            height: 80%;
        }
        :deep(.van-popup__close-icon) {
            color: #000;
        }

        .comments {
            background: #FFFFFF;
            padding: 18px 0;

            .comments-count {
                line-height: 24px;
                font-size: 15px;
                padding: 0 15px;
            }
        }
    }
}
</style>